<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <!-- <h2>Count: {{ getCount }}</h2> -->

    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
    <button @click="decrementAsync">Decrement Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["count"]), // 将 count 映射为计算属性
    ...mapGetters(["getCount"]), // 将 getCount 映射为计算属性
  },
  methods: {
    ...mapMutations(["increment", "decrement"]), // 将 increment 和 decrement 映射为方法
    ...mapActions(["incrementAsync", "decrementAsync"]), // 将 incrementAsync 和 decrementAsync 映射为方法
    // increment() {
    //   this.$store.commit('increment'); // 调用 mutation 的 increment 方法
    // },
    // decrement() {
    //   this.$store.commit('decrement'); // 调用 mutation 的 decrement 方法
    // },
    // incrementAsync() {
    //   this.$store.dispatch('incrementAsync'); // 调用 action 的 incrementAsync 方法
    // },
    // decrementAsync() {
    //   this.$store.dispatch('decrementAsync'); // 调用 action 的 decrementAsync 方法
    // },
  },
};
</script>